<template>
  <div class="test-api-container">
    <h2>API测试组件</h2>
    <button @click="testBatchDelete" class="el-button el-button-primary">测试批量删除API</button>
    <div v-if="result" class="result-box">
      <h3>测试结果:</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const result = ref(null)

const testBatchDelete = async () => {
  try {
    // 使用独立的axios实例，避免与主应用的拦截器冲突
    const testAxios = axios.create({
      baseURL: 'http://localhost:8080/api',
      timeout: 5000
    })
    
    // 设置token
    const token = localStorage.getItem('token')
    if (token) {
      testAxios.defaults.headers['Authorization'] = `Bearer ${token}`
    }
    
    // 测试批量删除API，使用一些不会影响实际数据的ID
    const testResponse = await testAxios.delete('/user/batch', {
      data: { userIds: [999999] } // 使用不存在的ID进行测试
    })
    
    result.value = testResponse.data
    ElMessage.success('API调用成功')
    console.log('API调用成功:', testResponse.data)
  } catch (error) {
    result.value = {
      error: true,
      message: error.message || '未知错误',
      response: error.response ? error.response.data : null
    }
    ElMessage.error('API调用失败')
    console.error('API调用失败:', error)
  }
}
</script>

<style scoped>
.test-api-container {
  padding: 20px;
}

.result-box {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #e0e0e0;
  background-color: #f5f5f5;
}

pre {
  white-space: pre-wrap;
}
</style>